<template>
    <dv-border-box-13>
        <div class="box">
            <div class="box-show">
                <div class="show-header">
                    <span class="spans-icon">
                        <v-icon name="chart-pie" class="text-icon"></v-icon>
                    </span>
                    <span>地图数据</span>

                </div>
                <div class="show-content">
                    <echarts :cdata="cdata"></echarts>
                </div>
            </div>
        </div>
    </dv-border-box-13>
</template>

<script>
import echarts from '@/components/twoLeftFirst/chart';
export default {
    data() {
        return {
            cdata: {
                category: [
                    "市区",
                    "万州",
                    "江北",
                    "南岸",
                    "北碚",
                    "綦南",
                    "长寿",
                    "永川",
                    "璧山",
                    "江津",
                    "城口",
                    "大足",
                    "垫江",
                    "丰都",
                    "奉节",
                    "合川",
                    "江津区",
                    "开州",
                    "南川",
                    "彭水",
                    "黔江",
                    "石柱",
                    "铜梁",
                    "潼南",
                    "巫山",
                    "巫溪",
                    "武隆",
                    "秀山",
                    "酉阳",
                    "云阳",
                    "忠县",
                    "川东",
                    "检修"
                ],
                lineData: [
                    18092,
                    20728,
                    24045,
                    28348,
                    32808,
                    36097,
                    39867,
                    44715,
                    48444,
                    50415,
                    56061,
                    62677,
                    59521,
                    67560,
                    18092,
                    20728,
                    24045,
                    28348,
                    32808,
                    36097,
                    39867,
                    44715,
                    48444,
                    50415,
                    36097,
                    39867,
                    44715,
                    48444,
                    50415,
                    50061,
                    32677,
                    49521,
                    32808
                ],
                barData: [
                    4600,
                    5000,
                    5500,
                    6500,
                    7500,
                    8500,
                    9900,
                    12500,
                    14000,
                    21500,
                    23200,
                    24450,
                    25250,
                    33300,
                    4600,
                    5000,
                    5500,
                    6500,
                    7500,
                    8500,
                    9900,
                    22500,
                    14000,
                    21500,
                    8500,
                    9900,
                    12500,
                    14000,
                    21500,
                    23200,
                    24450,
                    25250,
                    7500
                ],
                rateData: []
            }
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.setData();
    },
    watch: {

    },
    methods: {
        setData() {
            for (let i = 0; i < this.cdata.barData.length - 1; i++) {
                let rate = this.cdata.barData[i] / this.cdata.lineData[i];
                this.cdata.rateData.push(rate.toFixed(2));
            }
        },
    },
    components: {
        echarts
    },
};
</script>

<style lang="scss" scoped>
.dv-border-box-13 {
    width: 944px;
    height: 100%;
    margin: 0 5px 0 0;
}

.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;

    .box-show {
        width: 100%;
        height: 100%;
        background: rgba(19, 25, 47, 0.6);
        display: flex;
        flex-wrap: wrap;

        .show-header {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: white;
            display: flex;
            align-items: center;

            // padding: 8px 0 0 0;
            .spans-icon {
                margin-top: 10px;
            }

            span {
                margin: 8px 0 0 8px;
                line-height: 20px;
                display: inline-block;
                color: #c3cbde;
                font-size: 12px;
            }
        }

        .show-content {
            width: 100%;
            height: 100%    ;
        }
    }
}
</style>
